<template>
  <div>
    <el-menu class="content">
      <el-button class="createButton">寻找或开始新的对话</el-button>
      <el-menu-item>
        <router-link to="/channels/@me/my_friend">
          <div
            @click="currentSessionId = ''"
            style="
              font-size: 22px;
              font-weight: bolder;
              text-align: center;
              color: #08d671;
            "
          >
            好友
          </div>
        </router-link>
      </el-menu-item>
      <el-menu-item
        v-for="(item, i) in selfSessionList"
        :key="i"
        :class="{ active: item.sessionId === currentSessionId }"
        @click="selectSession(item.sessionId)"
      >
        <router-link :to="{ path: item.sessionId }">
          <div style="width: 100%">{{ item.sessionName }}</div>
        </router-link>
      </el-menu-item>
    </el-menu>
    <router-view />
  </div>
</template>

<style scoped>
.el-menu-item {
  border-radius: 9px;
}
a {
  text-decoration: none;
}
.active {
  background-color: #cac6c6;
}
.content {
  position: fixed;
  left: 70px;
  width: 235px;
  bottom: 50px;
  top: 0;
  background-color: #353535;
}
.createButton {
  width: 100%;
  height: 50px;
  background-color: #454545;
  border-right: 1px #353535;
  border-right-style: solid;
  border-bottom: 0;
  border-left: 0;
  border-top: 0;
}
</style>

<script>
import { useStore } from "vuex";
import { onMounted, ref, watch } from "vue";
import { useRouter } from "vue-router";

export default {
  setup() {
    const store = useStore();
    const router = useRouter();
    //const axios = require("axios");
    const currentSessionId = ref("");
    const selfSessionList = ref([
      { sessionId: "12", sessionName: "LiJianfeng" },
      { sessionId: "13", sessionName: "AoWei" },
    ]);

    //获取私人会话列表
    const getSelfSessionList = async () => {};

    const selectSession = (id) => {
      currentSessionId.value = id;
      store.commit("SELECT_SESSION", id);
    };

    onMounted(getSelfSessionList);

    watch(
      () => store.state.friend,
      (val, old) => {
        console.log(val, old);
        for (let item of selfSessionList.value) {
          if (item.sessionId === val.userId) {
            router.push(item.sessionId);
            return;
          }
        }
        //创建新会话
        selfSessionList.value.push({
          sessionId: val.userId,
          sessionName: val.userName,
        });
        router.push(val.userId);
      }
    );

    return {
      currentSessionId,
      selfSessionList,
      selectSession,
      getSelfSessionList,
    };
  },
};
</script>
